<template>
  <div>

    <div class="task-list-header ">
      <div class="d-flex align-items-center task-list-header-title">
        <div class="mr-auto ml-2">
          <van-icon :name="'records.png'|imgUrl" />
          <span class="font-medium ml-1">{{user.year}}·{{user.quarter}}季度</span>
        </div>
        <div class="mr-1 count-down d-flex align-items-center justify-content-center">
          倒计时:{{user.quarterEndDays}}天
        </div>
      </div>
      <div class="d-flex align-items-center task-list-header-th col-wrapper-4">
        <div class="col">状态</div>
        <div class="col text-center">任务</div>
        <div class="col">得分</div>
        <div class="col">期限</div>
      </div>
    </div>

    <div>
      <scroll-view scroll-y
                   :style="{height:contentHeight+'px'}">
        <TaskList :customClass="'student-current-tasks'"
                  :tasks="tasks"></TaskList>
      </scroll-view>

        <div class="p-2 d-flex student-current-bottom">
          <div class="d-flex"
               style="width:35%">
            <img :src="'progress-icon.png'|imgUrl"
                 style="width:29px;height:34px" />
            <div class="ml-1">
              <div>{{studyProgress}}</div>
              <div class="font-small font-color-light">学习进度</div>
            </div>
          </div>
          <div class="d-flex"
               style="width:35%">
            <img :src="'score-icon.png'|imgUrl"
                 style="width:26px;height:34px;margin-top:5px" />
            <div class="ml-1">
              <div>{{score}}</div>
              <div class="font-small font-color-light">本季得分</div>
            </div>
          </div>
          <div style="width:30%">
            <div @click="onCreateTask"
                 class="custom-button-success d-flex align-items-center justify-content-center">
              <van-icon name="plus"
                        color="#fff" />
              新增任务
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator'
import { AppUser } from '../../../utils/GlobalData'
import { Getter, Action } from 'vuex-class'
import TaskList from '@/components/TaskList.vue'
@Component({
  components: {
    TaskList
  },
  filters: {}
})
export default class StudentCurrent extends Vue {
  @Getter currentTasks;
  @Action getStudyTaskByQuarter;
  @Prop() contentHeight;
  public get tasks () {
    if (!this.currentTasks) {
      return null
    }
    var items = this.currentTasks.items
    this.$globalData.orderByTasks(items)
    return items
  }

  public get studyProgress () {
    if (this.tasks == null) {
      return '0 / 0'
    }
    var complete = 0
    var total = 0
    this.tasks.forEach(element => {
      total++
      if (element.status === 2) {
        complete++
      }
    })
    return complete + '/' + total
  }

  public get score () {
    if (this.tasks == null) {
      return 0
    }
    var score = 0
    this.tasks.forEach(element => {
      score += element.score
    })
    return score
  }

  public get user (): AppUser {
    return this.$globalData.appUser
  }
  public async created () {
    if (this.tasks === null) {
      await this.getStudyTaskByQuarter({
        year: this.user.year,
        quarter: this.user.quarter
      })
    }
  }
  public onShow () {}
  public get studentInfo () {
    return this.$store.state.student.studentInfo
  }

  public async onCreateTask (event) {
    if (this.studentInfo.job === 0) {
      Megalo.navigateTo({ url: 'pages/tasks/create0' })
    } else {
      Megalo.navigateTo({ url: 'pages/tasks/create1' })
    }
  }
}
</script>

<style lang="stylus" scoped>
$studentCurrentPageHeader = $studentHeaderHeight - 10px;

.task-list-header {
  top: $studentCurrentPageHeader;
}

.student-current-tasks {

}

.student-current-bottom {
  border-radius: 4px;
  background-color: #fff;
}
</style>
